<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>HIT-软件构造 | Lab1 项目配置 | Von Brank</title><meta name="keywords" content="教程,课程笔记,Java/Kotlin"><meta name="author" content="Von Brank"><meta name="copyright" content="Von Brank"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="HIT 软件构造课程实验 Lab1 项目配置说明">
<meta property="og:type" content="article">
<meta property="og:title" content="HIT-软件构造 | Lab1 项目配置">
<meta property="og:url" content="https://vonbrank.github.io/archives/hit-software-construction-lab1-config/index.html">
<meta property="og:site_name" content="Von Brank">
<meta property="og:description" content="HIT 软件构造课程实验 Lab1 项目配置说明">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://s2.loli.net/2022/05/01/pZiMB5ED7aHY3G4.jpg">
<meta property="article:published_time" content="2022-04-29T09:37:16.000Z">
<meta property="article:modified_time" content="2022-05-17T05:59:38.868Z">
<meta property="article:author" content="Von Brank">
<meta property="article:tag" content="教程">
<meta property="article:tag" content="课程笔记">
<meta property="article:tag" content="Java&#x2F;Kotlin">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://s2.loli.net/2022/05/01/pZiMB5ED7aHY3G4.jpg"><link rel="shortcut icon" href="https://s2.loli.net/2022/01/08/s8FYlS5uPrtichT.jpg"><link rel="canonical" href="https://vonbrank.github.io/archives/hit-software-construction-lab1-config/"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = { 
  root: '/',
  algolia: undefined,
  localSearch: {"path":"search.xml","languages":{"hits_empty":"找不到您查询的内容：${query}"}},
  translate: {"defaultEncoding":2,"translateDelay":0,"msgToTraditionalChinese":"繁","msgToSimplifiedChinese":"简"},
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '天',
  date_suffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: undefined,
  lightbox: 'fancybox',
  Snackbar: {"chs_to_cht":"你已切换为繁体","cht_to_chs":"你已切换为简体","day_to_night":"你已切换为深色模式","night_to_day":"你已切换为浅色模式","bgLight":"#49b1f5","bgDark":"#121212","position":"bottom-left"},
  source: {
    jQuery: 'https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js',
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/js/jquery.justifiedGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/css/justifiedGallery.min.css'
    },
    fancybox: {
      js: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js',
      css: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css'
    }
  },
  isPhotoFigcaption: false,
  islazyload: true,
  isanchor: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: 'HIT-软件构造 | Lab1 项目配置',
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  postUpdate: '2022-05-17 13:59:38'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          const now = new Date()
          const hour = now.getHours()
          const isNight = hour <= 6 || hour >= 18
          if (t === undefined) isNight ? activateDarkMode() : activateLightMode()
          else if (t === 'light') activateLightMode()
          else activateDarkMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
    const detectApple = () => {
      if (GLOBAL_CONFIG_SITE.isHome && /iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
        document.documentElement.classList.add('apple')
      }
    }
    detectApple()
    })(window)</script><meta name="generator" content="Hexo 5.4.0"><link rel="alternate" href="/atom.xml" title="Von Brank" type="application/atom+xml">
</head><body><div id="loading-box"><div class="loading-left-bg"></div><div class="loading-right-bg"></div><div class="spinner-box"><div class="configure-border-1"><div class="configure-core"></div></div><div class="configure-border-2"><div class="configure-core"></div></div><div class="loading-word">加载中...</div></div></div><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "" data-lazy-src="https://s2.loli.net/2022/01/08/s8FYlS5uPrtichT.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="site-data"><div class="data-item is-center"><div class="data-item-link"><a href="/archives/"><div class="headline">文章</div><div class="length-num">46</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/tags/"><div class="headline">标签</div><div class="length-num">25</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/categories/"><div class="headline">分类</div><div class="length-num">19</div></a></div></div></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page" href="/comments/"><i class="fa-fw fas fa-comments"></i><span> 评论</span></a></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fas fa-tools"></i><span> 工具</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="https://vonbrank.github.io/hit-introduction-to-discrete-mathematics/"><i class="fa-fw fas fa-less-than-equal"></i><span> 《离散数学引论》答案补充</span></a></li><li><a class="site-page child" href="https://vonbrank.github.io/my-tech-companies-website/"><i class="fa-fw fas fa-server"></i><span> 科技公司网页模仿</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://s2.loli.net/2022/05/01/pZiMB5ED7aHY3G4.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Von Brank</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page" href="/comments/"><i class="fa-fw fas fa-comments"></i><span> 评论</span></a></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fas fa-tools"></i><span> 工具</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="https://vonbrank.github.io/hit-introduction-to-discrete-mathematics/"><i class="fa-fw fas fa-less-than-equal"></i><span> 《离散数学引论》答案补充</span></a></li><li><a class="site-page child" href="https://vonbrank.github.io/my-tech-companies-website/"><i class="fa-fw fas fa-server"></i><span> 科技公司网页模仿</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">HIT-软件构造 | Lab1 项目配置</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-04-29T09:37:16.000Z" title="发表于 2022-04-29 17:37:16">2022-04-29</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2022-05-17T05:59:38.868Z" title="更新于 2022-05-17 13:59:38">2022-05-17</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/Java-Kotlin/">Java/Kotlin</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">2.7k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>8分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="HIT-软件构造 | Lab1 项目配置"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><div class="note warning flat"><p>⚠️ 警告：</p>
<p>本文所述内容仅能帮助你在 JetBrains IDEA 下以不修改代码框架中任何 <code>package</code> 命名的方式，优雅地完成实验内容，但注意到 <code>实验指导-Lab0-3.3.4</code> 中所述：</p>
<div class="note warning no-icon flat"><p>在提交至 GitHub 仓库前，请将实验代码从 Eclipse / IDEA 环境脱离开来，建议你自行使用 JDK、Ant (<a target="_blank" rel="noopener" href="http://ant.apache.org">http://ant.apache.org</a>)、Maven (<a target="_blank" rel="noopener" href="http://maven.apache.org">http://maven.apache.org</a>)、Gradle (<a target="_blank" rel="noopener" href="https://gradle.org">https://gradle.org</a>)等工具进行 build，或者在提交至 GitHub 仓库之后使用 Travis-CI (<a target="_blank" rel="noopener" href="https://travis-ci.org">https://travis-ci.org</a>)进行在线 build。如果因为缺少某些库文件导致你的程序无法运行，TA 不再为其评分。</p>
</div>
<p>这意味着完成实验后需要将基于 Eclipse / IDEA 的项目转换成某一通用的构建系统描述的项目，以应对 TA 可能采取的自动编译评测方式。</p></div>
<div class="note info flat"><p>如果你已经熟悉 IDEA 的基本使用，本文后半部分会讲述如何将 IDEA 普通 Java 项目迁移至使用 Gradle 构建，可直接转跳阅读 <a href="#%E8%BF%81%E7%A7%BB%E8%87%B3-Gradle-%E8%BF%9B%E8%A1%8C%E6%9E%84%E5%BB%BA">➡️</a></p>
</div>
<p>HIT-CS32123 软件构造课程 Lab1 项目结构大致如图：</p>
<figure class="highlight txt"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line">.Lab1</span><br><span class="line">├── src</span><br><span class="line">│   ├── P1</span><br><span class="line">│   │   ├── MagicSquare.java</span><br><span class="line">│   │   └── txt</span><br><span class="line">│   │       ├── 1.txt</span><br><span class="line">│   │       ├── 2.txt</span><br><span class="line">│   │       ├── 3.txt</span><br><span class="line">│   │       ├── 4.txt</span><br><span class="line">│   │       └── 5.txt</span><br><span class="line">│   ├── P2</span><br><span class="line">│   │   ├── .gitignore</span><br><span class="line">│   │   ├── rules</span><br><span class="line">│   │   │   ├── RulesOf6005.java</span><br><span class="line">│   │   │   └── RulesOf6005Test.java</span><br><span class="line">│   │   └── turtle</span><br><span class="line">│   │       ├── Action.java</span><br><span class="line">│   │       ├── DrawableTurtle.java</span><br><span class="line">│   │       ├── LineSegment.java</span><br><span class="line">│   │       ├── PenColor.java</span><br><span class="line">│   │       ├── Point.java</span><br><span class="line">│   │       ├── Turtle.java</span><br><span class="line">│   │       ├── TurtleGUI.java</span><br><span class="line">│   │       ├── TurtleSoup.java</span><br><span class="line">│   │       └── TurtleSoupTest.java</span><br><span class="line">│   └── P3</span><br><span class="line">│       ├── FriendshipGraph.java</span><br><span class="line">│       └── Person.java</span><br><span class="line">└── test</span><br><span class="line">    └── P3</span><br><span class="line">        └── FriendshipGraphTest.java</span><br></pre></td></tr></table></figure>
<p>从拿到的框架可知 <code>P2</code> 是一个 Eclipse 项目，而众所周知，JetBrains IDEA 比 Eclipse 好用<s>到不知道哪里去了</s>。因此本文将介绍如何在 IDEA 中正确配置本次实验的项目结构。</p>
<h2 id="先决条件">先决条件</h2>
<p>以下先决条件在此不再赘述：</p>
<ul>
<li>配置 JDK （版本要求大于 <span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mn>11</mn></mrow><annotation encoding="application/x-tex">11</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.64444em;vertical-align:0em;"></span><span class="mord">1</span><span class="mord">1</span></span></span></span> ）</li>
<li>下载并安装 JetBrains IDEA （本文使用的是旗舰版，社区版与旗舰版的配置过程只有细微差别）</li>
</ul>
<h2 id="解决方案">解决方案</h2>
<h3 id="新建项目">新建项目</h3>
<p>只需要注意项目类型选 Java 。</p>
<p><img src= "" data-lazy-src="https://s2.loli.net/2022/04/29/cB9AU7XsZjOQJHL.jpg" alt="图 1"></p>
<p>另外 JDK版本只需要大于课程要求的 <span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mn>11</mn></mrow><annotation encoding="application/x-tex">11</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.64444em;vertical-align:0em;"></span><span class="mord">1</span><span class="mord">1</span></span></span></span> 就行，其他的无所谓，因为稍后我们将通过 IDE 里的设置将代码所用特性限制在 Java 11 之前。</p>
<h3 id="配置-P1">配置 <code>P1</code></h3>
<p>刚建好的项目如图所示，可以看见 <code>src</code> 下面什么都没有：</p>
<p><img src= "" data-lazy-src="https://s2.loli.net/2022/04/29/PtibhEpIF3GHcsR.jpg" alt="图 2"></p>
<p>我们将下载到的代码框架的 <code>P1</code> 与 <code>P2</code> 文件夹直接复制到 <code>src</code> 下，此处你可以直接用文件资源管理器进行该操作。注意，不建议把 <code>Spring2022_HITCS_SC_Lab1</code> 这个项目 <code>clone</code> 下来，尤其不建议直接 <code>clone</code> 到 <code>src</code> 里，而只需要下载就可以。完成后如图所示：</p>
<p><img src= "" data-lazy-src="https://s2.loli.net/2022/04/29/3PX7R1EM2Ohgwz9.jpg" alt="图 3"></p>
<p>可以发现此时 IDEA 将 <code>P1</code> 和 <code>P2</code> 识别为 Java 包，但这是不对的，因为从 <code>P2</code> 的 <code>RulesOf6005.java</code> 看， <code>P1</code>， <code>P2</code> 包括之后的 <code>P3</code> 更像是可以独立编译运行的 Java 项目。 <code>rules</code> 应该是以 <code>P2</code> 作为顶层目录下的一个 <code>package</code> 而不是像现在这样 IDE 认为它应该被修改为包 <code>P2.rules</code> 。</p>
<p><img src= "" data-lazy-src="https://s2.loli.net/2022/04/29/24BNHvY1dGan5D9.jpg" alt="图 4"></p>
<p>为了解决这个问题，按下 <code>Ctrl+Shift+Alt+S</code> 来打开 <code>Project Structure</code> ，这是 IDEA 项目中一个非常重要的面板，你可以在这里利用 IDE 管理你的项目，比如你可以在左侧的 <code>Project</code> 里设置这个项目的语言等级（language level），比 JDK 版本（演示机上设置的是JDK 17）低的任何等级都可以被设置，在本次实验中我们允许使用 Java 8 - 11。但现在我们选择左侧的 <code>Module</code> ：</p>
<p><img src= "" data-lazy-src="https://s2.loli.net/2022/04/29/WMbXRrYCE4LVeKn.jpg" alt="图 5"></p>
<p>在继续之前，我们先引入 IDEA 中 Module 的概念，它不是从 Java 9 开始支持的那个 Java 中的 Module ，但有几分相似，事实上 IDEA 中一个项目被称为 Project ， Project 下允许构建可以独立运行的子组件，并设置其间的依赖关系，称为 Module 。IDEA 还有许多概念与 Eclipse 中的一些概念存在对应关系：</p>
<p><img src= "" data-lazy-src="https://s2.loli.net/2022/04/29/DVTwH94nQ8o2aOd.jpg" alt="图 6"></p>
<p>理解上述概念后，我们知道，解决上述问题的一个方法是：实验所需要的 <code>P1</code> 、 <code>P2</code> 和 <code>P3</code> 在 IDEA 中应该以 Module 的形式存在。接下来我们将为 <code>P1</code> 和 <code>P2</code> 创建 Module。</p>
<p>点击上方的 <code>+</code> 号，选择 <code>New Module</code> ，和创建项目的窗口非常类似，我们再次选择 Java ：</p>
<p><img src= "" data-lazy-src="https://s2.loli.net/2022/04/29/7AxonZqwVIJ4QWu.jpg" alt="图 7"></p>
<p><img src= "" data-lazy-src="https://s2.loli.net/2022/04/29/j6EwG5IrxhCyWzS.jpg" alt="图 8"></p>
<p>而路径则需要选择这个项目下的 <code>src/P1</code> ：</p>
<p><img src= "" data-lazy-src="https://s2.loli.net/2022/04/29/inkNqPoBpWlgVYT.jpg" alt="图 9"></p>
<p><img src= "" data-lazy-src="https://s2.loli.net/2022/04/29/97HlIATQSMzXbxh.jpg" alt="图 10"></p>
<p>此处表明一个 Module 确实像是一个新的 IDEA Java 项目，它为我们开发 Java 程序提供了一个独立的空间。</p>
<p>完成之后点击 <code>OK</code> 便回到了我们的 <code>Project Structure</code> 面板，在点击 <code>OK</code> 完成创建 <code>P1</code> 模块之前，先点击上方的 <code>Sources</code> 来到下面这个面板：</p>
<p><img src= "" data-lazy-src="https://s2.loli.net/2022/04/29/6NUhdOGfCJLp7wk.jpg" alt="图 11"></p>
<p>根据实验要求，我们 <code>MagicSquare.java</code> 应处于 <code>P1</code> 的根目录而不是 <code>P1</code> 的 <code>src</code> 子目录下，因此需要选择 <code>src</code> ，然后将上方的 <code>Sources</code> 按钮取消选中，之后你甚至可以直接删除 <code>P1</code> 下的这一个 <code>src</code> 文件夹；最后选择 <code>P1</code> 根目录本身，选中 <code>Sources</code> 将其作为 <code>P1</code> 模块的 <code>Sources Root</code> 。</p>
<p><img src= "" data-lazy-src="https://s2.loli.net/2022/04/29/BKtqpWRDgnymTYH.jpg" alt="图 12"></p>
<p>点击 <code>OK</code> 后我们便完成了 <code>P1</code> 模块的创建。可以看见 <code>P1</code> 的图标发生了明显变化，它现在不再是一个 <code>package</code> 而是一个可以独立编译运行的 <code>Module</code> ！</p>
<p><img src= "" data-lazy-src="https://s2.loli.net/2022/04/29/zICaW5eltSTipoA.jpg" alt="图 13"></p>
<p>另外根据实验指导，我们需要在 <code>P1</code> 下创建一个 <code>txt</code> 子目录来存放所有 <code>1.txt</code> 到 <code>5.txt</code> ，注意在一个 <code>Source Root</code> 下，创建一个 <code>package</code> 等同于创建一个文件夹，所以我们可以通过在 <code>P1</code> 下创建一个名为 <code>txt</code> 的包来创建 <code>txt</code> 这个目录。</p>
<p><img src= "" data-lazy-src="https://s2.loli.net/2022/04/29/P4VODcGeQTlRoAX.jpg" alt="图 14"></p>
<p>至此我们完成了 <code>P1</code> 模块的创建，你甚至可以写一个 <code>Hello World!</code> 程序来测试一下。</p>
<h3 id="配置-P2-JUnit-配置">配置 <code>P2</code> | <code>JUnit</code> 配置</h3>
<p><code>P2</code> 与 <code>P1</code> 的不同之处在于它提供了一个代码框架，同时它还依赖于 <code>JUnit</code> 。 <code>P2</code> 配置的前半部分与 <code>P1</code> 完全相同，为了检验是否理解了 IDEA Module 的概念，作为练习，请读者自行为 <code>P2</code> 创建 Module 。完成后结果如图所示：</p>
<p><img src= "" data-lazy-src="https://s2.loli.net/2022/04/29/5KvwpqnWyMtEOPI.jpg" alt="图 15"></p>
<p>但是注意到此时项目还是有警告的，因为我们还没有配置 <code>JUnit</code> ，事实上这并不是一种良好的项目结构，测试类通常不应该与源码在同一模块下。但是在 IDEA 下完成 <code>JUnit</code> 配置十分容易，我们只需要打开 <code>RulesOf6005Test.java</code> ，将鼠标悬停在有红线的 <code>junit</code> 上，出现的提示中选择 <code>Add 'JUnit' to classpath</code> ，</p>
<p><img src= "" data-lazy-src="https://s2.loli.net/2022/04/29/jyh9UTCf3RklB1p.jpg" alt="图 16"></p>
<p>在弹出的窗口中选 <code>OK</code> ，IDEA 将自动为我们下载 <code>JUnit</code> 包，然后将其添加到 <code>P2</code> 模块的依赖项中。</p>
<p><img src= "" data-lazy-src="https://s2.loli.net/2022/04/29/vhwAia1uW8FojKt.jpg" alt="图 17"></p>
<p>稍等片刻，所有警告都会消失， <code>Project Structure</code> 的 <code>Dependencis</code> 面板也显示 <code>JUnit</code> 确实被添加到了 <code>P2</code> 的依赖项列表里。</p>
<p><img src= "" data-lazy-src="https://s2.loli.net/2022/04/29/J6Bguqv7TPxyMk3.jpg" alt="图 18"></p>
<p>点击 <code>RulesOf6005Test</code> 里 <code>testMayUseCodeInAssignment</code> 右侧的小三角形，然后 <code>Run</code> 之，可以运行这一项单元测试。虽然出错了，但是可以看见 <code>testMayUseCodeInAssignment</code> 是可以运行的，只是 <code>RulesOf6005.mayUseCodeInAssignment</code> 还没有实现而已，所以报错，但这表明我们的对 <code>P2</code> 的配置已经完成了。</p>
<p><img src= "" data-lazy-src="https://s2.loli.net/2022/04/29/lQTgUkAsGC5i9D7.jpg" alt="图 19"></p>
<h3 id="配置-P3-模块间的依赖关系">配置 <code>P3</code> | 模块间的依赖关系</h3>
<p><code>P3</code> 是一个面向对象编程的练习，也是一个体验单元测试流程的练习。我们先来回顾一下实验指导要求的目录结构：</p>
<figure class="highlight txt"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">.Lab1</span><br><span class="line">├── src</span><br><span class="line">│   └── P3</span><br><span class="line">│       ├── FriendshipGraph.java</span><br><span class="line">│       └── Person.java</span><br><span class="line">└── test</span><br><span class="line">    └── P3</span><br><span class="line">        └── FriendshipGraphTest.java</span><br></pre></td></tr></table></figure>
<p>和 <code>P1</code> <code>P2</code> 一样，我们将 <code>P3</code> 和 <code>test</code> 里的 <code>P3</code> 都视作模块，唯一不同的是，<code>test</code> 里的 <code>P3</code> 是专门用来测试 <code>src</code> 里的 <code>P3</code> 的模块，因此虽然它的目录是 <code>test/P3</code> 但是个人认为给模块命名时称之为 <code>P3Test</code> 比较好，像这样：</p>
<p><img src= "" data-lazy-src="https://s2.loli.net/2022/05/02/AxhHKOpvRefNULu.jpg" alt="图 1"></p>
<p>其他步骤不再赘述，最终效果如图所示：</p>
<p><img src= "" data-lazy-src="https://s2.loli.net/2022/05/02/oGWghVRDmX3OJEn.jpg" alt="图 2"></p>
<p><img src= "" data-lazy-src="https://s2.loli.net/2022/05/02/roS25dpqKei4NYh.jpg" alt="图 3"></p>
<p>按照实验要求，我们需要先在 <code>P3</code> 中实现 <code>FriendshipGraph</code> 和 <code>Person</code> 类的功能，然后在 <code>src/P3</code> （ <code>P3Test</code> 与此意思相同，后文将不再区分）的 <code>FriendshipGraphTest</code> 类中对其进行测试。</p>
<p>为了演示这点而不违反 <code>Collaboration policy</code> ，本文将在 <code>P3</code> 创建 <code>FriendshipGraph</code> 类并在里面创建一个 <code>public static int getInt(int x)</code> 方法，这个方法传入一个 <code>int</code> 并返回这个 <code>int</code> 本身，非常无聊，但有助于演示；然后在 <code>P3Test</code> 中创建一个 <code>FriendshipGraphTest</code> 类，其中的 <code>public void friendshipGraphGetIntTest()</code> 方法用于测试 <code>FriendshipGraph.getInt</code> 方法：</p>
<p><img src= "" data-lazy-src="https://s2.loli.net/2022/05/02/G1nElSIMYpxgbcf.jpg" alt="图 4"></p>
<p>此处是本节的重点，形如 <code>assertEquals(0, FriendshipGraph.getInt(1))</code> 便可以用于测试。因为在 <code>FriendshipGraphTest</code> 类的 <code>friendshipGraphGetIntTest</code> 方法中，我们既使用了 <code>JUnit</code> 库的方法 <code>assertEquals</code> ，又使用了 <code>FriendshipGraph</code> 中的方法，所以我们称 “<code>FriendshipGraphTest</code> <strong>依赖于</strong> <code>JUnit</code> 和 <code>FriendshipGraph</code>” ；因为 <code>FriendshipGraphTest</code> 在 <code>P3Test</code> 模块中， <code>FriendshipGraph</code> 在 <code>P3</code> 模块中，所以同理，我们称 “<code>P3Test</code> 模块依赖于 <code>P3</code> 模块” 。</p>
<p>按照 <code>P2</code> 介绍的方式，我们可以很容易地为 <code>P3Test</code> 引入 <code>JUnit</code> 单元测试库，在此作为练习，效果如图所示：</p>
<p><img src= "" data-lazy-src="https://s2.loli.net/2022/05/02/LIghpkaoAtFO2sE.jpg" alt="图 5"></p>
<p>此时 <code>JUnit</code> 可以正常使用，但是 <code>FriendshipGraph</code> 标红表示此处不可用，因为我们还没有设置 <code>P3Test</code> 依赖于 <code>P3</code> 。可以看见一旦我们将鼠标悬在 <code>FriendshipGraph</code> 上方，智能的 IDEA 就会建议我们将 <code>P3</code> 添加为依赖项。IDEA 给出这个正确的建议的原因之一是当前项目里只有 <code>P3</code> 里有 <code>FriendshipGraph</code> 类，具有特殊性，所以我们还是来看一下如何将一个模块设置为另一个模块的依赖项。</p>
<p>首先还是打开 <code>Project Structure</code> ，然后 选择 <code>P3Test</code> 模块，打开 <code>Dependencies</code> 面板，点击 <code>+</code> 号，选择 <code>Module Dependency</code> ：</p>
<p><img src= "" data-lazy-src="https://s2.loli.net/2022/05/02/OEk6qDGtNi9uKUw.jpg" alt="图 6"></p>
<p>在弹出的窗口中选择 <code>P3</code> ：</p>
<p><img src= "" data-lazy-src="https://s2.loli.net/2022/05/02/RFKVWMtrjw6UzqT.jpg" alt="图 7"></p>
<p>点击 <code>OK</code> ，可以看见我们成功将 <code>P3</code> 模块添加到 <code>P3Test</code> 的依赖项列表：</p>
<p><img src= "" data-lazy-src="https://s2.loli.net/2022/05/02/ANRvOki4VodfaYq.jpg" alt="图 8"></p>
<p>到此为止，我们已经完成了本次实验在 IDEA 中的全部配置。运行一下 <code>FriendshipGraphTest</code> 中的单元测试发现可以正确运行：</p>
<p><img src= "" data-lazy-src="https://s2.loli.net/2022/05/02/PhwRl6eSqTIB3EQ.jpg" alt="图 9"></p>
<h2 id="后续步骤">后续步骤</h2>
<h3 id="迁移至-Gradle-进行构建">迁移至 <code>Gradle</code> 进行构建</h3>
<p>正如前文所述，如果 TA 使用自动化测试，那么提交的项目应该与 IDE 无关。此处我们推荐使用 Gradle 管理项目。过程如下：</p>
<ul>
<li>
<p>将下列依赖项放至项目根目录下 <code>lib</code> 文件夹内：</p>
<ul>
<li><code>junit-4.13.1.jar</code></li>
<li><code>hamcrest-core-1.31.jar</code></li>
<li><code>hamcrest-core-1.3-sources.jar</code></li>
</ul>
</li>
<li>
<p>在项目根目录下新建 <code>settings.gradle.kts</code> ，填写内容如下：</p>
<figure class="highlight kotlin"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">rootProject.name = <span class="string">&quot;项目名&quot;</span></span><br></pre></td></tr></table></figure>
</li>
<li>
<p>在项目根目录下新建 <code>build.gradle.kts</code> ，详细配置请参考奆佬 Nullptr 的 <a target="_blank" rel="noopener" href="https://nullptr.icu/index.php/archives/65/">[软构] 记一次 Gradle 的坑</a></p>
</li>
<li>
<p>接着点击 <code>Link Gradle project</code> ，等待 IDEA 完成 Gradle 项目初始化。</p>
</li>
</ul>
<p>完成这一切后你可能发现 <code>Project Structure</code> 中 <code>P1</code> 等模块被重复了两次，这是因为 <code>Gradle</code> 将这些模块视作 <code>Resource</code> 并创建在根模块下。你可以删掉其中不在项目根模块中的那一个，因为它们原本是由 IDEA 管理的，现在不需要了。</p>
</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="mailto:undefined">Von Brank</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://vonbrank.github.io/archives/hit-software-construction-lab1-config/">https://vonbrank.github.io/archives/hit-software-construction-lab1-config/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://vonbrank.github.io" target="_blank">Von Brank</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/%E6%95%99%E7%A8%8B/">教程</a><a class="post-meta__tags" href="/tags/%E8%AF%BE%E7%A8%8B%E7%AC%94%E8%AE%B0/">课程笔记</a><a class="post-meta__tags" href="/tags/Java-Kotlin/">Java/Kotlin</a></div><div class="post_share"><div class="social-share" data-image="https://s2.loli.net/2022/05/01/pZiMB5ED7aHY3G4.jpg" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/social-share.js/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/social-share.js/dist/js/social-share.min.js" defer></script></div></div><div class="post-reward"><div class="reward-button button--animated"><i class="fas fa-qrcode"></i> 打赏</div><div class="reward-main"><ul class="reward-all"><li class="reward-item"><a href="/img/wechat.png" target="_blank"><img class="post-qr-code-img" src= "" data-lazy-src="/img/wechat.png" alt="WeChat"/></a><div class="post-qr-code-desc">WeChat</div></li><li class="reward-item"><a href="/img/alipay.jpg" target="_blank"><img class="post-qr-code-img" src= "" data-lazy-src="/img/alipay.jpg" alt="AliPay"/></a><div class="post-qr-code-desc">AliPay</div></li></ul></div></div><nav class="pagination-post" id="pagination"><div class="next-post pull-full"><a href="/archives/book-note-csapp/"><img class="next-cover" src= "" data-lazy-src="https://s2.loli.net/2022/01/12/DuW9EMYc274VsvS.jpg" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">【阅读笔记】深入理解计算机系统</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><div><a href="/archives/udemy-note-build-responsive-real-world-websites-with-html-and-css/" title="【课程笔记】Udemy - Build Responsive Real-World Websites with HTML and CSS"><img class="cover" src= "" data-lazy-src="https://s2.loli.net/2022/01/07/8O5MjcQI7peF6CK.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-01-05</div><div class="title">【课程笔记】Udemy - Build Responsive Real-World Websites with HTML and CSS</div></div></a></div><div><a href="/archives/hit-cs31106-explanation-01/" title="C语言答疑-01"><img class="cover" src= "" data-lazy-src="https://s2.loli.net/2022/01/08/aHnR1gNZI75hTd2.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2020-10-28</div><div class="title">C语言答疑-01</div></div></a></div><div><a href="/archives/hit-cs31106-explanation-04/" title="C语言答疑-04"><img class="cover" src= "" data-lazy-src="https://s2.loli.net/2022/01/08/aHnR1gNZI75hTd2.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2020-11-23</div><div class="title">C语言答疑-04</div></div></a></div><div><a href="/archives/udemy-note-advanced-css-and-sass/" title="【课程笔记】Udemy - Advanced CSS and Sass: Flexbox, Grid, Animations and More!"><img class="cover" src= "" data-lazy-src="https://s2.loli.net/2022/01/07/AKhDvulVjkErmXS.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-01-07</div><div class="title">【课程笔记】Udemy - Advanced CSS and Sass: Flexbox, Grid, Animations and More!</div></div></a></div><div><a href="/archives/hit-cs31106-explanation-02/" title="C语言答疑-02"><img class="cover" src= "" data-lazy-src="https://s2.loli.net/2022/01/08/aHnR1gNZI75hTd2.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2020-11-07</div><div class="title">C语言答疑-02</div></div></a></div><div><a href="/archives/hit-cs31106-explanation-03/" title="C语言答疑-03"><img class="cover" src= "" data-lazy-src="https://s2.loli.net/2022/01/08/aHnR1gNZI75hTd2.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2020-11-12</div><div class="title">C语言答疑-03</div></div></a></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src= "" data-lazy-src="https://s2.loli.net/2022/01/08/s8FYlS5uPrtichT.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Von Brank</div><div class="author-info__description">Von Brank, a student from Harbin Institute of Technology, who likes coding, video editing, designing, gaming, and more.</div></div><div class="card-info-data"><div class="card-info-data-item is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">46</div></a></div><div class="card-info-data-item is-center"><a href="/tags/"><div class="headline">标签</div><div class="length-num">25</div></a></div><div class="card-info-data-item is-center"><a href="/categories/"><div class="headline">分类</div><div class="length-num">19</div></a></div></div><a class="button--animated" id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/vonbrank"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/vonbrank" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="mailto:vonbrank@outlook.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a><a class="social-icon" href="https://twitter.com/Von_Brank" target="_blank" title="Twitter"><i class="fab fa-twitter"></i></a><a class="social-icon" href="https://steamcommunity.com/id/vonbrank/" target="_blank" title="Steam"><i class="fab fa-steam"></i></a><a class="social-icon" href="/atom.xml" target="_blank" title="RSS"><i class="fas fa-rss"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn card-announcement-animation"></i><span>公告</span></div><div class="announcement_content">This is my Blog</div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%85%88%E5%86%B3%E6%9D%A1%E4%BB%B6"><span class="toc-text">先决条件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88"><span class="toc-text">解决方案</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%96%B0%E5%BB%BA%E9%A1%B9%E7%9B%AE"><span class="toc-text">新建项目</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%85%8D%E7%BD%AE-P1"><span class="toc-text">配置 P1</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%85%8D%E7%BD%AE-P2-JUnit-%E9%85%8D%E7%BD%AE"><span class="toc-text">配置 P2 | JUnit 配置</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%85%8D%E7%BD%AE-P3-%E6%A8%A1%E5%9D%97%E9%97%B4%E7%9A%84%E4%BE%9D%E8%B5%96%E5%85%B3%E7%B3%BB"><span class="toc-text">配置 P3 | 模块间的依赖关系</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%90%8E%E7%BB%AD%E6%AD%A5%E9%AA%A4"><span class="toc-text">后续步骤</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%BF%81%E7%A7%BB%E8%87%B3-Gradle-%E8%BF%9B%E8%A1%8C%E6%9E%84%E5%BB%BA"><span class="toc-text">迁移至 Gradle 进行构建</span></a></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/archives/hit-software-construction-lab1-config/" title="HIT-软件构造 | Lab1 项目配置"><img src= "" data-lazy-src="https://s2.loli.net/2022/05/01/pZiMB5ED7aHY3G4.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="HIT-软件构造 | Lab1 项目配置"/></a><div class="content"><a class="title" href="/archives/hit-software-construction-lab1-config/" title="HIT-软件构造 | Lab1 项目配置">HIT-软件构造 | Lab1 项目配置</a><time datetime="2022-04-29T09:37:16.000Z" title="发表于 2022-04-29 17:37:16">2022-04-29</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/archives/book-note-csapp/" title="【阅读笔记】深入理解计算机系统"><img src= "" data-lazy-src="https://s2.loli.net/2022/01/12/DuW9EMYc274VsvS.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="【阅读笔记】深入理解计算机系统"/></a><div class="content"><a class="title" href="/archives/book-note-csapp/" title="【阅读笔记】深入理解计算机系统">【阅读笔记】深入理解计算机系统</a><time datetime="2022-01-12T06:13:00.000Z" title="发表于 2022-01-12 14:13:00">2022-01-12</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/archives/udemy-note-the-complete-javascript-course/" title="【课程笔记】Udemy - The Complete JavaScript Course 2022: From Zero to Expert!"><img src= "" data-lazy-src="https://s2.loli.net/2022/01/07/IpZeyLJzvVwbO7A.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="【课程笔记】Udemy - The Complete JavaScript Course 2022: From Zero to Expert!"/></a><div class="content"><a class="title" href="/archives/udemy-note-the-complete-javascript-course/" title="【课程笔记】Udemy - The Complete JavaScript Course 2022: From Zero to Expert!">【课程笔记】Udemy - The Complete JavaScript Course 2022: From Zero to Expert!</a><time datetime="2022-01-07T16:13:32.000Z" title="发表于 2022-01-08 00:13:32">2022-01-08</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/archives/udemy-note-advanced-css-and-sass/" title="【课程笔记】Udemy - Advanced CSS and Sass: Flexbox, Grid, Animations and More!"><img src= "" data-lazy-src="https://s2.loli.net/2022/01/07/AKhDvulVjkErmXS.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="【课程笔记】Udemy - Advanced CSS and Sass: Flexbox, Grid, Animations and More!"/></a><div class="content"><a class="title" href="/archives/udemy-note-advanced-css-and-sass/" title="【课程笔记】Udemy - Advanced CSS and Sass: Flexbox, Grid, Animations and More!">【课程笔记】Udemy - Advanced CSS and Sass: Flexbox, Grid, Animations and More!</a><time datetime="2022-01-07T12:44:32.000Z" title="发表于 2022-01-07 20:44:32">2022-01-07</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/archives/udemy-note-build-responsive-real-world-websites-with-html-and-css/" title="【课程笔记】Udemy - Build Responsive Real-World Websites with HTML and CSS"><img src= "" data-lazy-src="https://s2.loli.net/2022/01/07/8O5MjcQI7peF6CK.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="【课程笔记】Udemy - Build Responsive Real-World Websites with HTML and CSS"/></a><div class="content"><a class="title" href="/archives/udemy-note-build-responsive-real-world-websites-with-html-and-css/" title="【课程笔记】Udemy - Build Responsive Real-World Websites with HTML and CSS">【课程笔记】Udemy - Build Responsive Real-World Websites with HTML and CSS</a><time datetime="2022-01-05T14:31:56.000Z" title="发表于 2022-01-05 22:31:56">2022-01-05</time></div></div></div></div></div></div></main><footer id="footer" style="background-image: url('https://s2.loli.net/2022/05/01/pZiMB5ED7aHY3G4.jpg')"><div id="footer-wrap"><div class="copyright">&copy;2021 - 2022 By Von Brank</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="translateLink" type="button" title="简繁转换">繁</button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i></button></div></div><div id="local-search"><div class="search-dialog"><div class="search-dialog__title" id="local-search-title">本地搜索</div><div id="local-input-panel"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div></div><hr/><div id="local-search-results"></div><span class="search-close-button"><i class="fas fa-times"></i></span></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="/js/tw_cn.js"></script><script src="https://cdn.jsdelivr.net/npm/instant.page/instantpage.min.js" type="module"></script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js"></script><script src="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.js"></script><script src="/js/search/local-search.js"></script><script>var preloader = {
  endLoading: () => {
    document.body.style.overflow = 'auto';
    document.getElementById('loading-box').classList.add("loaded")
  },
  initLoading: () => {
    document.body.style.overflow = '';
    document.getElementById('loading-box').classList.remove("loaded")

  }
}
window.addEventListener('load',preloader.endLoading())</script><div class="js-pjax"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.css"><script src="https://cdn.jsdelivr.net/npm/katex-copytex@latest/dist/katex-copytex.min.js"></script><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/katex-copytex@latest/dist/katex-copytex.min.css"><script>(() => {
  document.querySelectorAll('#article-container span.katex-display').forEach(item => {
    btf.wrap(item, 'div', { class: 'katex-wrap'})
  })
})()</script></div><script id="canvas_nest" defer="defer" color="27, 129, 203" opacity="0.7" zIndex="-1" count="256" mobile="false" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-nest.min.js"></script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div></body></html>